import { Card } from './ui/card';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, PieChart, Pie, Cell } from 'recharts';
import { ClipboardCheck, AlertTriangle, Users, TrendingUp } from 'lucide-react';
import { mockCleaningData, mockCleaners } from '../data/mockData';

export function Dashboard() {
  // 统计数据
  const totalTasks = mockCleaningData.length;
  const excellentCount = mockCleaningData.filter(d => d.status === '优秀').length;
  const needsImprovement = mockCleaningData.filter(d => d.status === '需改进').length;
  const averageScore = Math.round(mockCleaningData.reduce((acc, d) => acc + d.score, 0) / totalTasks);

  // 按类型统计数据
  const typeData = [
    {
      name: '卫生间',
      数量: mockCleaningData.filter(d => d.type === '卫生间').length,
      平均分: Math.round(mockCleaningData.filter(d => d.type === '卫生间').reduce((acc, d) => acc + d.score, 0) / mockCleaningData.filter(d => d.type === '卫生间').length)
    },
    {
      name: '地面',
      数量: mockCleaningData.filter(d => d.type === '地面').length,
      平均分: Math.round(mockCleaningData.filter(d => d.type === '地面').reduce((acc, d) => acc + d.score, 0) / mockCleaningData.filter(d => d.type === '地面').length)
    },
    {
      name: '垃圾桶',
      数量: mockCleaningData.filter(d => d.type === '垃圾桶').length,
      平均分: Math.round(mockCleaningData.filter(d => d.type === '垃圾桶').reduce((acc, d) => acc + d.score, 0) / mockCleaningData.filter(d => d.type === '垃圾桶').length)
    }
  ];

  // 按楼栋统计
  const buildingData = [
    {
      name: 'A栋',
      优秀: mockCleaningData.filter(d => d.building === 'A栋' && d.status === '优秀').length,
      良好: mockCleaningData.filter(d => d.building === 'A栋' && d.status === '良好').length,
      一般: mockCleaningData.filter(d => d.building === 'A栋' && d.status === '一般').length,
      需改进: mockCleaningData.filter(d => d.building === 'A栋' && d.status === '需改进').length
    },
    {
      name: 'B栋',
      优秀: mockCleaningData.filter(d => d.building === 'B栋' && d.status === '优秀').length,
      良好: mockCleaningData.filter(d => d.building === 'B栋' && d.status === '良好').length,
      一般: mockCleaningData.filter(d => d.building === 'B栋' && d.status === '一般').length,
      需改进: mockCleaningData.filter(d => d.building === 'B栋' && d.status === '需改进').length
    }
  ];

  // 状态分布
  const statusData = [
    { name: '优秀', value: mockCleaningData.filter(d => d.status === '优秀').length, color: '#10b981' },
    { name: '良好', value: mockCleaningData.filter(d => d.status === '良好').length, color: '#3b82f6' },
    { name: '一般', value: mockCleaningData.filter(d => d.status === '一般').length, color: '#f59e0b' },
    { name: '需改进', value: mockCleaningData.filter(d => d.status === '需改进').length, color: '#ef4444' }
  ];

  return (
    <div className="space-y-6">
      <div>
        <h2>数据总览</h2>
        <p className="text-gray-500">实时监控保洁数据和统计信息</p>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">总检查点</p>
              <p className="text-2xl mt-1">{totalTasks}</p>
            </div>
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
              <ClipboardCheck className="w-6 h-6 text-blue-600" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">平均评分</p>
              <p className="text-2xl mt-1">{averageScore}</p>
            </div>
            <div className="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
              <TrendingUp className="w-6 h-6 text-green-600" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">优秀率</p>
              <p className="text-2xl mt-1">{Math.round((excellentCount / totalTasks) * 100)}%</p>
            </div>
            <div className="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center">
              <Users className="w-6 h-6 text-purple-600" />
            </div>
          </div>
        </Card>

        <Card className="p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">需改进</p>
              <p className="text-2xl mt-1">{needsImprovement}</p>
            </div>
            <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
              <AlertTriangle className="w-6 h-6 text-red-600" />
            </div>
          </div>
        </Card>
      </div>

      {/* 图表 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <Card className="p-6">
          <h3 className="mb-4">各类型保洁数据统计</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={typeData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="数量" fill="#3b82f6" />
              <Bar dataKey="平均分" fill="#10b981" />
            </BarChart>
          </ResponsiveContainer>
        </Card>

        <Card className="p-6">
          <h3 className="mb-4">保洁质量分布</h3>
          <ResponsiveContainer width="100%" height={300}>
            <PieChart>
              <Pie
                data={statusData}
                cx="50%"
                cy="50%"
                labelLine={false}
                label={(entry) => `${entry.name}: ${entry.value}`}
                outerRadius={100}
                fill="#8884d8"
                dataKey="value"
              >
                {statusData.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip />
            </PieChart>
          </ResponsiveContainer>
        </Card>

        <Card className="p-6 lg:col-span-2">
          <h3 className="mb-4">楼栋保洁质量对比</h3>
          <ResponsiveContainer width="100%" height={300}>
            <BarChart data={buildingData}>
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="name" />
              <YAxis />
              <Tooltip />
              <Legend />
              <Bar dataKey="优秀" stackId="a" fill="#10b981" />
              <Bar dataKey="良好" stackId="a" fill="#3b82f6" />
              <Bar dataKey="一般" stackId="a" fill="#f59e0b" />
              <Bar dataKey="需改进" stackId="a" fill="#ef4444" />
            </BarChart>
          </ResponsiveContainer>
        </Card>
      </div>
    </div>
  );
}
